<template>
	<view class="content">
		<u-tabs :list="list1" lineColor="rgba(212, 139, 57, 1)" @click="clicktabtow"
			:activeStyle="{color: '#000000',fontWeight: 'bold',transform: 'scale(1.05)'}"
			:inactiveStyle="{color: 'rgba(102, 102, 102, 1)',fontWeight: 'bold',transform: 'scale(1)'}"
			itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"></u-tabs>
		<view class="padding_lrb ">
			<!-- 系统消息 -->
			<template v-if="currenttabtow==0">
				<view class="zwtimg placeholderimg flexcenter" style="margin-top: 300rpx;"
					v-if="systemMessageList.data.length==0">
					<image src="@/static/image/bg-icons/placeholderimg.png" mode=""></image>
				</view>
				<view class="margin_top" @click="details(item.id)" v-for="item in systemMessageList.data"
					:key="item.id">
					<view class="ffffff padding">
						<view class="text_x color_san">{{item.title}}</view>
						<view class="text_a color_san margin_top">{{item.des}}</view>
						<view class="flexbetween margin_top">
							<view class="text_five color_six">{{item.createtime_text}}</view>
							<view class="flexleft">
								<view class="text_five color_six">查看详情</view>
								<view class="right_icon" style="margin-left: 19rpx;"></view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- 订单消息 -->
			<template v-if="currenttabtow==1">
				<view class="zwtimg placeholderimg flexcenter" style="margin-top: 300rpx;"
					v-if="orderMessageList.data.length==0">
					<image src="@/static/image/bg-icons/placeholderimg.png" mode=""></image>
				</view>
				<view class="ffffff padding border_2 margin_top" v-for="item in orderMessageList.data" :key="item.id">

					<view class="flexbetween">
						<view class="flexleft">
							<view class="number margin_right2">{{item.title}}</view>
						</view>
						<view class="hongsetext flexright" style="rgba(102, 102, 102, 1);min-width: 300rpx;">
							{{item.createtime_text}}
						</view>
					</view>
					<view class="flexbetween  margin_top" v-for="ite in item.ordergoods" @click="orderxq(ite.order_id)">
						<view class="shilitu">
							<image :src="ite.image_text" mode=""></image>
						</view>
						<view class="" style="width: 74%;">
							<view class="yihang text_zi">{{ite.title}}</view>
							<view class="baise" style="margin: 12rpx 0rpx;">{{ite.difference}}</view>
							<view class="flexbetween">
								<view class="qianshu">¥{{ite.price}}</view>
								<view class="shuliang">X{{ite.number}}</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- 互动消息 -->
			<template v-if="currenttabtow==2">
				<view class="zwtimg placeholderimg flexcenter" style="margin-top: 300rpx;"
					v-if="interactionMessageList.data.length==0">
					<image src="@/static/image/bg-icons/placeholderimg.png" mode=""></image>
				</view>
				<view class="ffffff padding border_2 margin_top" v-for="item in interactionMessageList.data"
					:key="item.id" @click="tiezi(item.invitation.id)">
					<view class="flexbetween ">
						<view class="flexleft">
							<view class="header">
								<image :src="item.ly_user.avatar_text" mode=""></image>
							</view>
							<view class="" style="margin-left: 30rpx;">
								<view class="name">{{item.ly_user.nickname}}</view>
								<view class="baise" style="margin: 16rpx 0rpx;">
									<view class="flexleft reply" v-show="item.type==2&&item.invitationcomment.content">
										{{item.invitationcomment.content}}
									</view>
									<view class="flexleft reply" v-show="item.type==2&&!item.invitationcomment.content">
										此评论已被删除
									</view>
									<image src="../static/image/home/jin_sc.png" v-show="item.type==3" mode=""
										class="img"></image>
									<image src="../static/image/home/jin_xin.png" v-show="item.type==1" mode=""
										class="img"></image>
								</view>
								<view class="flexbetween">
									<view class="text_f color_san">{{item.createtime_text}}</view>
								</view>
							</view>
						</view>
						<view class="img_right">
							<image :src="item.invitation.images_text[0]" mode="" class="radius"></image>
						</view>
					</view>
				</view>
			</template>

		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				currenttabtow: 0,
				list1: [{
						name: '系统通知',
					},
					{
						name: '订单消息',
					},
					{
						name: '互动消息',
					},
				],
				page: 1,
				limit: 12,
				systemMessageList: {
					data: []
				}, //系统通知
				orderMessageList: {
					data: []
				}, //订单消息
				interactionMessageList: {
					data: []
				}, //互动消息
			}
		},
		onShow() {
			this.getSystemMessage()
		},
		methods: {
			getSystemMessage(isPage, page) { //系统通知
				let _this = this
				httpRequest.request('/api/user/systemnotice', 'GET', {
					page: page || 1,
					limit: _this.limit,
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.systemMessageList;
						if (isPage == true) {
							_this.systemMessageList.data = dataList.data.concat(resList.data);
						} else {
							_this.systemMessageList = res.data
							_this.systemMessageList.data = resList.data;
						}
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			orderxq(id) { //详情
				uni.navigateTo({
					url: "/pages_my/dingdanxq?id=" + id
				})
			},
			tiezi(id) { //帖子详情
				uni.navigateTo({
					url: "/pages_post/tiezixq?id=" + id
				})
			},
			getOrderMessage(isPage, page) { //订单消息
				let _this = this
				httpRequest.request('/api/order/orderMessage', 'GET', {
					page: page || 1,
					limit: _this.limit,
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.orderMessageList;
						if (isPage == true) {
							_this.orderMessageList.data = dataList.data.concat(resList.data);
						} else {
							_this.orderMessageList = res.data
							_this.orderMessageList.data = resList.data;
						}
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getInteractionMessage(isPage, page) { //互动消息
				let _this = this
				httpRequest.request('/api/user/invitationMessage', 'GET', {
					page: page || 1,
					limit: _this.limit,
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.interactionMessageList;
						if (isPage == true) {
							_this.interactionMessageList.data = dataList.data.concat(resList.data);
						} else {
							_this.interactionMessageList = res.data
							_this.interactionMessageList.data = resList.data;
						}
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.invitationList;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getInvitationList(true, page);
			},
			details(id) {
				uni.navigateTo({
					url: "/pages_my/tongzhi?id=" + id
				})
			},
			clicktabtow(e) {
				this.currenttabtow = e.index;
				if (this.currenttabtow == 0) {
					this.getSystemMessage()
				} else if (this.currenttabtow == 1) {
					this.getOrderMessage()
				} else {
					this.getInteractionMessage()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-tabs__wrapper__nav__item {
		//平均分配
		flex: 1;
	}

	.img_right {
		width: 114rpx;
		height: 114rpx;
		border-radius: 15rpx 15rpx 15rpx 15rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
		}
	}

	.reply {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.header {
		width: 114rpx;
		height: 114rpx;
		border-radius: 14rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.name {
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #D48B39;
	}

	.img {
		width: 18rpx;
		height: 18rpx;
	}

	.line {
		border-top: 1rpx solid RGBA(242, 242, 242, 1);
		padding-top: 30rpx;
	}

	.text_zi {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.number {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #00A74D;
	}

	.baise {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}


	.shuliang {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: rgba(212, 139, 57, 1);
	}

	.qianshu {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: rgba(212, 139, 57, 1);
	}


	.shilitu {
		width: 134rpx;
		height: 128rpx;
		border-radius: 14rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}
	}


	.hongsetext {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}
</style>